main {
  width: 100%;
  max-width: 919px;
  padding-top: 100px;
  padding-left: 15px;
  padding-right: 15px;
  margin: auto;
  .article {
    min-height: 550px;
    .title {
      text-align: center;
      font-size: 25px;
      font-weight: 600;
    }
    .date {
      text-align: center;
      margin-top: 10px;
      color: #999;
    }
    .content {
      margin-top: 20px;
      line-height: 40px;
      color: rgb(84, 90, 95);
      word-wrap: break-word;
      word-break: break-all;
      overflow: hidden;
    }
  }

  .comments {
    margin-top: 50px;
    .comments_title {
      position: relative;
      font-size: 20px;
      color: #4693e9;
      padding-bottom: 5px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    .comments_title::before {
      position: absolute;
      left: 0;
      bottom: 0;
      content: "";
      width: 95px;
      height: 2px;
      background: #4693e9;
    }
    #form {
      margin-top: 20px;
      width: 100%;
      .top {
        width: 100%;
        display: flex;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        input {
          width: 100%;
          height: 30px;
          outline: none;
          border: 0;
        }
        .name {
          padding-left: 5px;
          padding-right: 5px;
          border-right: 1px solid rgba(0, 0, 0, 0.2);
          flex: 1;
        }
        .contact {
          flex: 1;
          padding-left: 15px;
        }
      }
      .content {
        position: relative;
        margin-top: 10px;
        overflow: hidden;
        textarea {
          padding-left: 5px;
          width: 100%;
          height: 150px;
          resize: none;
          font-size: 14px;
          outline: none;
          border: 1px solid rgba(0, 0, 0, 0.2);
          border-radius: 5px;
        }
        .content_icon {
          position: absolute;
          top: 30px;
          right: 10%;
          width: 162px;
          height: 75px;
          background: url(../images/comment.png) no-repeat;
          transform: all 0.3s;
        }
      }
      .btn {
        margin-top: 10px;
        button {
          font-size: 16px;
          width: 100%;
          height: 50px;
          background: #54b8f3;
          color: #fff;
          border: 0;
          border-radius: 10px;
          outline: none;
          box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
        }
        button:active {
          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
        }
      }
    }
    .comments_list {
      margin-top: 15px;
      .comments_list_title {
        position: relative;
        font-size: 15px;
        color: #666;
        padding-bottom: 5px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
      }
      .comments_list_title::before {
        position: absolute;
        left: 0;
        bottom: 0;
        content: "";
        width: 95px;
        height: 2px;
        background: #4693e9;
      }
      .comments_list_item {
        position: relative;
        width: 100%;
        min-height: 80px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        display: flex;
        padding-bottom: 15px;
        .comments_item_left {
          width: 50px;
          img {
            margin-top: 10px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
          }
        }
        .comments_item_right {
          margin-left: 10px;
          flex: 1;
          padding-top: 10px;
          .comments_name {
            color: #333;
          }
          .comments_name_icon {
            width: 20px;
            height: 20px;
            color: #fff;
            text-align: center;
            line-height: 20px;
            display: inline-block;
            background-image: -webkit-linear-gradient(
              0deg,
              #3ca5f6 0%,
              #a86af9 100%
            );
          }
          .comments_email {
            margin-left: 10px;
            color: #333;
          }
          .comments_date {
            margin-left: 10px;
            color: #333;
          }
          .comments_content {
            margin-top: 10px;
            color: #333;
          }
        }
      }
    }
  }
}
